//登录
import React, {Component} from 'react'
import {View, Text, StyleSheet, Dimensions, Alert, TouchableOpacity, TextInput} from 'react-native'
import styles from '../../configs/styles'
import {UserLogin} from '../../configs/api'


const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;

const loginStyle = StyleSheet.create({
  body: {
    flex: 1,
    backgroundColor: '#5d5d5d'
  },
  title: {
    paddingTop: 60,
    paddingBottom: 40,
    alignSelf: 'center'
  },
  titleText: {
    color: 'white',
    fontSize: 25,
    fontWeight: 'bold'
  },
  inputBlock:{
    alignSelf: 'center',
    padding: 10
  },
  input: {
    width: screenWidth - 80,
    height: 40,
    borderRadius: 30,
    borderColor: '#e6e6e6',
    borderWidth: 1,
    paddingLeft: 10,
    marginTop: 10,
    fontSize: 16,
    color: 'white',
  },
  inputTextLabel: {
    fontSize: 12,
    color: 'lightgrey',
    alignSelf: 'flex-start'
  },
  submit: {
    width: screenWidth - 80,
    height: 40,
    borderRadius: 30,
    marginTop: 30,
    backgroundColor: '#3980f4',
    alignSelf: 'center',
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'center'
  },
})

class Login extends Component {
  static navigationOptions = ({navigation}) => {
    return {
      header: null
    }
  };

  //初始化props和state
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      // 防止重复点击登录
      processing: false
    }
  }

  componentDidMount (){
    storage.load({key: 'loginState'}).then(res =>{
      this.setState({
        username: res.username,
        password: res.password
      })
    }).catch(err=>console.log(err.name))
  }

  submitLogin = ()=>{
    if(this.state.processing){
      return null
    }
    this.setState({processing: true})
    UserLogin(this.state.username, this.state.password).then(res=>{
      if(res.token && res.user_id){
        const data = {
          school_id: res.school_id,
          token: res.token,
          user_id: res.user_id,
          username: this.state.username,
          password: this.state.password,
          info: res.info
        }
        storage.save({
          key: 'loginState',  // 注意:请不要在key中使用_下划线符号!
          data: data
        })
        Object.assign(loginState, data)
        this.props.successCallback(res.school_id)
      }else{
        this.setState({processing: false})
        Alert.alert(res.msg)
      }
    }).catch(err =>{
      this.setState({processing: false})
      Alert.alert('服务器错误！')
      console.log(err)
    })
  }

  render() {
    return (
      <View style={loginStyle.body}>
        <View style={loginStyle.title}><Text style={loginStyle.titleText}>学校信息工作服务平台</Text></View>
        <View style={loginStyle.inputBlock}>
          <Text style={loginStyle.inputTextLabel}>username</Text>
          <TextInput autoCapitalize={'none'} value={this.state.username} autoFocus={true} style={loginStyle.input} onChangeText={(v)=>this.setState({username: v})}/>
        </View>
        <View style={loginStyle.inputBlock}>
          <Text style={loginStyle.inputTextLabel}>password</Text>
          <TextInput style={loginStyle.input} secureTextEntry={true}  value={this.state.password} onChangeText={(v)=>this.setState({password: v})}/>
        </View>
        <TouchableOpacity style={loginStyle.submit} onPress={ () => this.submitLogin()}>
          <Text style={{color: 'white', }}>{this.state.processing ? 'LOGIN...' : 'LOGIN'}</Text>
        </TouchableOpacity>
      </View>
    )

  }
}

export default Login